<div class="modal fade overflow-y-hidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" id="add">
    <div class="modal-dialog modal-lg-f modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
               
                <h4 class="modal-title" id="myModalLabel">功能管理 - 新增</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="popup-body modal-body modal-body680">
                <form name="newlyAddedForm" #newlyAddedForm="ngForm">
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">上级机构：</label>
                        <div class="col-xs-12 col-sm-9">
                            <p>{{superiorAdd}}</p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">功能名称：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="functionName" autocomplete="off" class="form-control" pattern="^[a-zA-Z\d\u4E00-\u9FA5_ ]+$"
                             placeholder="请输入功能名称,输入英文和汉字" required #functionName=ngModel [(ngModel)]="adddate.functionName">
                            <label class="red required">*</label>
                            <div class="error" *ngIf="functionName.invalid && (functionName.touched)">
                                <small class="error" *ngIf="functionName.errors.required">功能名称不能为空</small>
                                <small class="error" *ngIf="functionName.errors?.pattern ">不能输入特殊符号,允许输入_和空格</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">功能编码：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="functionCode" autocomplete="off" placeholder="请输入功能编码,输入英文和汉字" pattern="^[a-zA-Z\d\u4E00-\u9FA5_]+$"
                             class="form-control" required #functionCode=ngModel [(ngModel)]="adddate.functionCode"
                            />
                            <label class="red required">*</label>
                            <div class="error" *ngIf="functionCode.invalid && (functionCode.touched)">
                                <small class="error" *ngIf="functionCode.errors.required">功能编码不能为空</small>
                                <small class="error" *ngIf="functionCode.errors?.pattern ">不能输入特殊符号,允许输入_</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">英文名：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="text" name="functionEName" autocomplete="off" placeholder="请输入英文名" pattern="^[a-zA-Z_ ]+$"
                             class="form-control" required #functionEName=ngModel [(ngModel)]="adddate.functionEName"
                            />
                            <label class="red required">*</label>
                            <div class="error" *ngIf="functionEName.invalid && (functionEName.touched)">
                                <small class="error" *ngIf="functionEName.errors.required">英文名不能为空</small>
                                <small class="error" *ngIf="functionEName.errors?.pattern ">只能输入英文,允许输入_和空格</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">页面地址：</label>
                        <div class="col-xs-12 col-sm-9">
                            <input type="url" name="pageUrl" autocomplete="off" class="form-control" placeholder="请输入页面地址,输入英文和数字用/分割" pattern="^[0-9a-zA-Z/]+$"
                             required #pageUrl=ngModel [(ngModel)]="adddate.pageUrl" />
                            <label class="red required">*</label>
                            <div class="error" *ngIf="pageUrl.invalid && (pageUrl.touched)">
                                <small class="error" *ngIf="pageUrl.errors.required">页面地址不能为空</small>
                                <small class="error" *ngIf="pageUrl.errors?.pattern ">输入英文和数字,允许输入/</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">功能类型：</label>
                        <div class="col-xs-12 col-sm-9">
                            <!-- <select name="functionType" #functionType=ngModel [(ngModel)]="adddate.functionType" required>
                                <option value=null>请选择</option>
                                <option value="0">功能点</option>
                                <option value="1">功能页</option>
                            </select>
                            <div class="error" *ngIf="functionType.invalid && (functionType.dirty||functionType.touched)">
                            	<small class="error" *ngIf="functionType.errors.required">功能类型不能为空</small>
                            </div> -->
                            <label class="toggle toggle-positive">
                                <input type="checkbox" name="functionType" #functionType=ngModel [(ngModel)]="adddate.functionType" />
                                <div class="track">
                                    <div class="tit" *ngIf="adddate.functionType">功能页</div>
                                    <div class="tit right" *ngIf="!adddate.functionType">功能点</div>
                                    <div class="handle"></div>
                                </div>
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">是否启用：</label>
                        <div class="col-xs-12 col-sm-9">
                            <!-- <select name="enable" #enable=ngModel [(ngModel)]="adddate.enable" required>
                                <option value=null>请选择</option>
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                            <div class="error" *ngIf="enable.invalid && (enable.dirty||enable.touched)">
                            	<small class="error" *ngIf="enable.errors.required">是否启用不能为空</small>
                            </div> -->
                            <label class="toggle toggle-positive">
                                <input type="checkbox" name="enable" #enable=ngModel [(ngModel)]="adddate.enable" />
                                <div class="track">
                                    <div class="tit" *ngIf="adddate.enable">启用</div>
                                    <div class="tit right" *ngIf="!adddate.enable">禁用</div>
                                    <div class="handle"></div>
                                </div>
                            </label>
                        </div> 
                    </div>
                    <div class="form-group">
                        <label class="col-xs-12 col-sm-3 control-label text-right">描述：</label>
                        <div class="col-xs-12 col-sm-9">
                            <textarea rows="5" type="text"  class="form-control" name="description" #description=ngModel [(ngModel)]="adddate.description"
                            placeholder="描述长度在0-50个汉字之间" minlength="0" maxlength="50"
                            ></textarea>
                            <div *ngIf="description.invalid" class="error-alert text-left">
                                <div *ngIf="description.errors.minlength || description.errors.maxlength">
                                    <small class="error "> 描述长度在0-50之间</small>
                                </div>
                            </div>
                        </div>
                    </div>   
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" mat-raised-button (click)="reset()">取消</button>
                <button type="button" class="btn btn-primary" mat-button [disabled]="newlyAddedForm.invalid" (click)="submitAdd()">
                        <span class="glyphicon glyphicon-plus"></span> 新增</button>
            </div>
        </div>
    </div>
</div>